<template>
	<view class="bangding">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">绑定微信</block>
		</cu-custom>
		<view class="cu-form-group">
			<view class="title">验证码</view>
			<input placeholder="验证码" v-model="code" disabled="true" name="input"></input>
			<button class='cu-btn bg-green shadow' @tap="getCode">获取验证码</button>
		</view>
		<view class="cu-form-group">
			<view class="title">绑定状态：</view>
			<switch class='red' disabled :class="isBangding?'checked':''" :checked="isBangding?true:false">
			</switch>
		</view>
		<view class="solids-bottom padding-xs flex align-center" v-if="code!=''">
			<view class="flex-sub text-center">
				<view class="solid-bottom text-sm padding">
					<text class="text-grey">你的验证码是{{code}},请再群聊中回复</text>
					<text class="text-red">绑定{{code}}(该验证码5分钟内有效)</text>
					<button class="cu-btn bg-red round sm copy" @tap="copy">复制</button>
				</view>
			</view>
		</view>
		<view class="solids-bottom padding-xs flex align-center" v-if="isBangding">
			<view class="flex-sub text-center">
				<view class="solid-bottom text-sm padding">
					<text class="text-grey">你所在的群聊为“{{groupName}}”</text>
					</br>
					<text class="text-gray">你所在群聊中的昵称为“{{nickname}}”</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex";
	export default {
		name: 'personage',
		data() {
			return {
				key: '',
				code: '',
				isBangding: false,
				nickname: '',
				wxid: '',
				group: '',
				groupName: '',
			}
		},
		computed: {
			...mapGetters(['isLogin'])
		},
		created() {
			this.getIsBangding();
		},
		methods: {
			...mapActions(['loginAction', 'userInfoAction', 'isLoginAction']),
			getIsBangding() {
				this.$http.get('/santu/tbGroupMember/isBangding').then((res) => {
					let code = res.data.code;
					let message = res.data.message;
					let result = res.data.result;
					let group = result.group;
					let groupName = result.groupName;
					let object = result.object;
					let nickname = object.nickname;
					let wxid = object.wxid;
					if (code == 200) {
						this.isBangding = true;
						this.nickname = nickname;
						this.wxid = wxid;
						this.group = group;
						this.groupName = groupName;
					}
				})
			},
			getCode() {
				if (this.isBangding) {
					let that = this;
					uni.showModal({
						title: '提示',
						content: '你已经绑定成功,无需重复绑定!',
						confirmText:'继续绑定',
						showCancel: true,
						success: function(res) {
							if (res.confirm) {
								that.getCode2();
							} else if (res.cancel) {
								return;
							}
						}
					});
					return;
				}
				this.getCode2();
			},
			getCode2(){
				this.$http.get('/santu/tbGroupMember/getCode').then((res) => {
					let code = res.data.code;
					let message = res.data.message;
					let result = res.data.result;
					this.code = result;
					uni.showToast({
						title: message
					})
				})
			},
			copy() {
				let text = "绑定" + this.code;
				uni.setClipboardData({
					data: text,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
					fail: function() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
			bangding() {
				console.log('bangding------>');
				this.$http.get('/santu/tbGroupMember/bangding', {
					params: {
						key: this.key,
						code: this.code
					}
				}).then((res) => {
					console.log('result---->', res);
				})
			},
			generate12DigitRandomNumber() {
				const min = Math.pow(10, 11);
				const max = Math.pow(10, 12) - 1;
				return Math.floor(Math.random() * (max - min + 1)) + min;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bangding-button {
		margin-top: 30px;
		display: flex;
		justify-content: center;
	}

	.copy {
		margin-left: 15px;
	}
</style>